<template>
  <div class="box">
    <header class="header">
      <div class="top">
        <a @click="goBack" class="iconfont icon-zuojiantou1"></a>
        <router-link to="/login" tag="a">登录</router-link>
      </div>
    </header>
    <div class="content">
      <h2>注册易厨账号</h2>
      <b>做一道菜，温暖你所爱的人</b>
      <mt-field label="+86" class="username" placeholder="请输入手机号" type="tel" v-model="username"></mt-field>
      
      <mt-field label=" " class="password" placeholder="请输入至少6位密码" type="password" v-model="password"></mt-field>
      <p @click="register">注 册</p>
      <span>我已阅读并同意<a>易厨服务条款</a></span>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Field, Toast } from 'mint-ui'
import axios from 'axios'
Vue.use(Field, Toast)
export default {
  data () {
    return{
      username:'',
      password:''
    }
  },
  methods: {
    register () {
      console.log(this.username)
      axios.post('/daxun/users/register', {
        username: this.username,
        password: this.password
      }).then(data => {
        console.log(data)
        if(data.data == '1') {
          Toast('注册成功')
          this.$router.push('/login')
        } else if (data.data == '2') {
          Toast('账号已存在')
        }
      })
    },
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
  .header{
    @include rect(100%,0.44rem);
    @include background-color(#fff);
    @include text-color(#000);
    border-bottom:1px solid #bbb;
    .top{
      @include rect(100%,0.44rem);
      a:nth-of-type(1){
        @include font-size(20px);
        @include text-color(#000);
        @include line-height(38px);
        @include margin(3px 0 0 15px);
        font-weight: 600;
        float:left;
      }
      a:nth-of-type(2){
        @include font-size(14px);
        @include text-color(#000);
        @include line-height(44px);
        @include margin(0 15px);
        float:right;
      }
    }
  }
  .content{
    @include rect(100%,auto);
    h2{
      @include font-size(26px);
      @include font-weight(300);
      @include margin(50px 0 0 107px)
    }
    b{
      @include font-weight(300);
      @include font-size(16px);
      @include margin(20px 0 0 90px);
      display: block;
    }
    p{
      @include rect(90%,0.4rem);
      @include background-color(#ffb31a);
      @include text-color(#fff);
      @include font-size(14px);
      text-align:center;
      @include line-height(40px);
      @include margin(80px auto);
      border-radius: 20px;
    }
    .username{
      @include rect(85%,0.2rem);
      @include margin(50px auto 0);
      border-bottom:1px solid #bbb;
      @include text-color(#000);
    }
    .password{
      @include rect(85%,0.2rem);
      @include margin(0 auto);
      border-bottom:1px solid #bbb;
      .mint-cell-value {
        .mint-field-core {
          color: #000!important;
          .mint-field-state {
            color: #000!important;
          }
        }
        
      }
    }
    span{
      width:100%;
      height:30px;
      position: absolute;
      bottom: 10px;
      display: block;
      text-align:center;
      margin-top:30px;
      font-size:12px;
      color: #aaa;
    }
    span a{
      color:rgb(0, 47, 255);
      text-decoration: underline;
    }
  }

</style>
